import React, { createContext, useContext } from "react";
// useContext主要是用于简化Consumer的接受的
// 用于useContext,createContext还是必须要有的

// useContext需要接受context对象作为参数，并且可以返回出它对应的value属性

const context1 = createContext();
const context2 = createContext();

const Child2 = () => {
  const { name } = useContext(context1);
  const { nickName } = useContext(context2);
  return (
    <p>
      child2组件 - {name} - {nickName}
    </p>
    // <context1.Consumer>
    //   {(value) => (
    //     <context2.Consumer>
    //       {(val) => (
    //         <p>
    //           child2组件 - {value.name} - {val.nickName}
    //         </p>
    //       )}
    //     </context2.Consumer>
    //   )}
    // </context1.Consumer>
  );
};

const Child1 = () => {
  return (
    <context2.Provider
      value={{
        nickName: "xiaosan",
      }}
    >
      <p>child1组件</p>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider
      value={{
        name: "zhangsan",
      }}
    >
      <h2>useContext</h2>
      <Child1 />
    </context1.Provider>
  );
};

export default App;
